<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区 -->
    <el-card class="box-card">
       <!-- 权限组件 -->
       <el-table style="width: 100%" :data='rightslist'>
         <el-table-column type="index" label="#" style="width: 100%"> </el-table-column>
         <el-table-column prop="authName" label="权限名称" style="width: 100%"></el-table-column>
         <el-table-column prop="path" label="路径" style="width: 100%"></el-table-column>
         <el-table-column  label="权限等级" style="width: 100%">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.level==='0'">一级</el-tag>
             <el-tag type="success" v-if="scope.row.level==='1'">二级</el-tag>
             <el-tag type="danger" v-if="scope.row.level==='2'">三级</el-tag>
           </template>
         </el-table-column>
       </el-table>
        <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout=" prev, pager, next"
          :page-count="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
    
</template>

<script>
export default {
  data() {
    return {
      
      rightslist:[],
      total:0
    }
  },
  created(){
    this.getrightslist()
  },
  methods: {
   async getrightslist(){
     const {data:res}=await this.$http.get(`rights/list`)
     if(res.meta.status===200) { 
      //  console.log(res);
       this.rightslist=res.data
       this.total = Math.ceil(res.data.length/8);
     }else{
       return  this.$message({
                     showClose: true,
                     message: res.meta.msg,
                     type: 'error'
    })
    
    }
  },
  // 分页切换事件回调函数 参数currentPage当前页
  handleCurrentChange(currentPage){
    //  this.rightslist=this.rightslist.slice(currentPage*8,8)
    console.log(currentPage);
  }
}
}
</script>

<style scoped>


</style>